Creative UI and UX

Prerequisite

• Minimum Intermediate with Mathematics, Physics, Computer/Chemistry.
• Having a Personal Computer (with good specifications).
• Able to read, write and understand the English language

Course Description

Unleash your creativity and learn to design intuitive and engaging user interfaces with this UI/UX course. Through hands-on projects, you'll explore the principles of user-centered design, wireframing, prototyping, and usability testing using Figma and other industry-standard tools.

What you will learn

• The fundamentals of UI/UX design and user-centered design principles.
• Creating wireframes and prototypes using Figma.
• Designing for different platforms and devices.
• Conducting usability tests and gathering user feedback.
• Applying design thinking to solve complex user experience challenges.

Course Outline

• Week 1 Introduction to UI/UX Design and Figma

  • Overview of course structure and goals
  • Importance of peer review and how to apply feedback
  • Required tools: Figma setup and workspace basics
  • What is a User Interface?
  • The Relationship Between UI and UX
  • Roles in UI/UX
  • Basic navigation and interface in Figma
  • Creating and managing projects in Figma

• Week 2 Figma Basics and Design Principles

  • Using shapes, text, and images in Figma
  • Layers, grouping, and frames in Figma
  • Introduction to vector networks in Figma
  • Setting design goals
  • Introduction to color theory
  • Introduction to font psychology
  • Basic typography in Figma
  • Basic imagery use in Figma
  • Creating basic UI elements in Figma
  • Applying design principles to Figma projects

• Week 3 Component Design and Reusability

  • Creating reusable components in Figma
  • Using and managing component variants in Figma
  • Designing buttons in Figma
  • Designing input fields in Figma
  • Designing other UI elements in Figma
  • Building a component library in Figma
  • Implementing components in design projects

• Week 4 Advanced Figma Techniques

  • Creating interactive prototypes in Figma
  • Adding interactions to prototypes in Figma
  • Managing interactions in Figma prototypes
  • Creating transition animations in Figma
  • Building a simple interactive prototype in Figma
  • Testing prototypes in Figma
  • Refining prototypes based on feedback

• Week 5 Visual Design Elements

  • Defining visual style and aesthetic for a project
  • Using color effectively in Figma
  • Using shape effectively in Figma
  • Using imagery effectively in Figma
  • Using language as a design tool in Figma
  • Designing a cohesive visual style in Figma
  • Applying look and feel to UI projects in Figma

• Week 6 Advanced Prototyping and User Flow

  • Creating complex interactions in Figma
  • Creating animations in Figma
  • Using overlays in Figma prototypes
  • Using nested components in Figma prototypes
  • Managing prototype flows in Figma
  • Developing advanced prototypes in Figma
  • Conducting usability testing with Figma prototypes

• Week 7 Collaboration and Feedback in Figma

  • Sharing designs with stakeholders using Figma
  • Using comments for feedback in Figma
  • Collaborating with team members in Figma
  • Managing version control in Figma
  • Using design history in Figma
  • Working on a collaborative design project in Figma
  • Implementing feedback from peers in Figma

• Week 8 Design Systems and Libraries in Figma

  • Principles of design systems
  • Creating a design system in Figma
  • Maintaining a design system in Figma
  • Using Figma libraries
  • Managing Figma libraries
  • Building a comprehensive design system in Figma
  • Creating and managing component libraries in Figma

• Week 9 Responsive Design with Figma

  • Principles of responsive design
  • Designing for different screen sizes in Figma
  • Using auto-layout in Figma
  • Setting constraints in Figma
  • Using grid systems in Figma
  • Designing responsive interfaces in Figma
  • Applying auto-layout techniques in Figma
  • Implementing grid systems in Figma

• Week 10 User Research and Testing

  • Conducting user research for UI projects
  • Creating user personas based on research
  • Planning usability testing for Figma prototypes
  • Conducting usability testing sessions
  • Analyzing usability test results
  • Incorporating research findings into design
  • Designing for user needs based on research

• Week 11 Advanced UI Techniques

  • Designing with accessibility in mind in Figma
  • Implementing accessibility features in Figma
  • Creating micro-interactions in Figma
  • Adding subtle animations in Figma
  • Designing for web platforms in Figma
  • Designing for mobile platforms in Figma
  • Ensuring inclusive design in Figma
  • Meeting accessibility standards in Figma designs

• Week 12 Final Project and Presentation

  • Developing a comprehensive UI project using Figma
  • Incorporating all learned techniques into the project
  • Preparing the final project presentation
  • Presenting the final project to the class
  • Receiving feedback on the final project
  • Providing feedback to peers
  • Reflecting on the design process and lessons learned
  • Discussing best practices in UI design with Figma

Grading Criteria

Particulars	Marks (%)
Quizzes	20
Class Participation/ Attendance	15
Projects	25
Final Projects	40
Total	100